<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible"
      :close-on-click-modal="false" draggable>
      <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
       <el-row :gutter="24">
    <el-col :span="12" class="mb20">
      <el-form-item label="物业公司" prop="propertyId">
        <el-input v-model="form.propertyId" placeholder="请输入物业公司"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="小区名称" prop="estateName">
        <el-input v-model="form.estateName" placeholder="请输入小区名称"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="首字母" prop="nameCharacter">
        <el-input v-model="form.nameCharacter" placeholder="请输入首字母"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="所在省份" prop="prov">
        <el-input v-model="form.prov" placeholder="请输入所在省份"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="所在城市" prop="city">
        <el-input v-model="form.city" placeholder="请输入所在城市"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="所在区县" prop="district">
        <el-input v-model="form.district" placeholder="请输入所在区县"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="小区地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入小区地址"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" lng" prop="lng">
        <el-input v-model="form.lng" placeholder="请输入 lng"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label=" lat" prop="lat">
        <el-input v-model="form.lat" placeholder="请输入 lat"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="负责人姓名" prop="leaderName">
        <el-input v-model="form.leaderName" placeholder="请输入负责人姓名"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="负责人电话" prop="leaderPhone">
        <el-input v-model="form.leaderPhone" placeholder="请输入负责人电话"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="办公室电话" prop="telphone">
        <el-input v-model="form.telphone" placeholder="请输入办公室电话"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="小程序房屋列表是否显示房屋面积" prop="isShowRoomArea">
        <el-input v-model="form.isShowRoomArea" placeholder="请输入小程序房屋列表是否显示房屋面积"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="物业费高层单价" prop="wyfHighSinglePrice">
        <el-input v-model="form.wyfHighSinglePrice" placeholder="请输入物业费高层单价"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="物业费低层单价" prop="wyfLowSinglePrice">
        <el-input v-model="form.wyfLowSinglePrice" placeholder="请输入物业费低层单价"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="物业费商业房单价" prop="wyfBusinessPrice">
        <el-input v-model="form.wyfBusinessPrice" placeholder="请输入物业费商业房单价"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="物业费别墅单价" prop="wyfVillaSinglePrice">
        <el-input v-model="form.wyfVillaSinglePrice" placeholder="请输入物业费别墅单价"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="水费单价 - 居民" prop="waterSinglePrice">
        <el-input v-model="form.waterSinglePrice" placeholder="请输入水费单价 - 居民"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="水费 - 商业" prop="waterBusinessSinglePrice">
        <el-input v-model="form.waterBusinessSinglePrice" placeholder="请输入水费 - 商业"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="垃圾处理费" prop="trashSinglePrice">
        <el-input v-model="form.trashSinglePrice" placeholder="请输入垃圾处理费"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="电费 - 居民" prop="electricSinglePrice">
        <el-input v-model="form.electricSinglePrice" placeholder="请输入电费 - 居民"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="电费 - 商业" prop="electricBusinessSinglePrice">
        <el-input v-model="form.electricBusinessSinglePrice" placeholder="请输入电费 - 商业"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="充电桩收费类型" prop="chargerRoleType">
        <el-input v-model="form.chargerRoleType" placeholder="请输入充电桩收费类型"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="小区物业费收费二维码" prop="qrCode">
        <el-input v-model="form.qrCode" placeholder="请输入小区物业费收费二维码"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="状态  0 - 可用 1 - 不可用" prop="state">
        <el-input v-model="form.state" placeholder="请输入状态  0 - 可用 1 - 不可用"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="一次性缴费 享受优惠的 的月数 " prop="wyfYhMonth">
        <el-input v-model="form.wyfYhMonth" placeholder="请输入一次性缴费 享受优惠的 的月数 "/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="优惠的折扣  9.5折  全年折扣" prop="wyfYhRate">
        <el-input v-model="form.wyfYhRate" placeholder="请输入优惠的折扣  9.5折  全年折扣"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="优惠的折扣  9.7折  半年折扣" prop="wyfYhRateHalf">
        <el-input v-model="form.wyfYhRateHalf" placeholder="请输入优惠的折扣  9.7折  半年折扣"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="农商行支付商户id" prop="payPlatformId">
        <el-input v-model="form.payPlatformId" placeholder="请输入农商行支付商户id"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="抄表年份" prop="checkMeterYear">
        <el-input v-model="form.checkMeterYear" placeholder="请输入抄表年份"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="抄表月份" prop="checkMeterMonth">
        <el-input v-model="form.checkMeterMonth" placeholder="请输入抄表月份"/>
      </el-form-item>
      </el-col>

    <el-col :span="12" class="mb20">
      <el-form-item label="物业费和水费绑定  0 - 不绑定 1 - 绑定选中月份之前的  2 - 所有全部绑定" prop="wyfWaterBand">
        <el-input v-model="form.wyfWaterBand" placeholder="请输入物业费和水费绑定  0 - 不绑定 1 - 绑定选中月份之前的  2 - 所有全部绑定"/>
      </el-form-item>
      </el-col>

			</el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script setup lang="ts" name="EstateDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj } from '/@/api/platform/module/estate/estate'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
// 定义字典

// 提交表单数据
const form = reactive({
		id:'',
	  propertyId: '',
	  estateName: '',
	  nameCharacter: '',
	  prov: '',
	  city: '',
	  district: '',
	  address: '',
	  lng: '',
	  lat: '',
	  leaderName: '',
	  leaderPhone: '',
	  telphone: '',
	  isShowRoomArea: '',
	  wyfHighSinglePrice: '',
	  wyfLowSinglePrice: '',
	  wyfBusinessPrice: '',
	  wyfVillaSinglePrice: '',
	  waterSinglePrice: '',
	  waterBusinessSinglePrice: '',
	  trashSinglePrice: '',
	  electricSinglePrice: '',
	  electricBusinessSinglePrice: '',
	  chargerRoleType: '',
	  qrCode: '',
	  state: '',
	  wyfYhMonth: '',
	  wyfYhRate: '',
	  wyfYhRateHalf: '',
	  payPlatformId: '',
	  checkMeterYear: '',
	  checkMeterMonth: '',
	  wyfWaterBand: '',
});

// 定义校验规则
const dataRules = ref({
        propertyId: [{required: true, message: '物业公司不能为空', trigger: 'blur'}],
        estateName: [{required: true, message: '小区名称不能为空', trigger: 'blur'}],
        nameCharacter: [{required: true, message: '首字母不能为空', trigger: 'blur'}],
        prov: [{required: true, message: '所在省份不能为空', trigger: 'blur'}],
        city: [{required: true, message: '所在城市不能为空', trigger: 'blur'}],
        district: [{required: true, message: '所在区县不能为空', trigger: 'blur'}],
        address: [{required: true, message: '小区地址不能为空', trigger: 'blur'}],
        lng: [{required: true, message: '不能为空', trigger: 'blur'}],
        lat: [{required: true, message: '不能为空', trigger: 'blur'}],
        leaderName: [{required: true, message: '负责人姓名不能为空', trigger: 'blur'}],
        leaderPhone: [{required: true, message: '负责人电话不能为空', trigger: 'blur'}],
        telphone: [{required: true, message: '办公室电话不能为空', trigger: 'blur'}],
        isShowRoomArea: [{required: true, message: '小程序房屋列表是否显示房屋面积不能为空', trigger: 'blur'}],
        wyfHighSinglePrice: [{required: true, message: '物业费高层单价不能为空', trigger: 'blur'}],
        wyfLowSinglePrice: [{required: true, message: '物业费低层单价不能为空', trigger: 'blur'}],
        wyfBusinessPrice: [{required: true, message: '物业费商业房单价不能为空', trigger: 'blur'}],
        wyfVillaSinglePrice: [{required: true, message: '物业费别墅单价不能为空', trigger: 'blur'}],
        waterSinglePrice: [{required: true, message: '水费单价 - 居民不能为空', trigger: 'blur'}],
        waterBusinessSinglePrice: [{required: true, message: '水费 - 商业不能为空', trigger: 'blur'}],
        trashSinglePrice: [{required: true, message: '垃圾处理费不能为空', trigger: 'blur'}],
        electricSinglePrice: [{required: true, message: '电费 - 居民不能为空', trigger: 'blur'}],
        electricBusinessSinglePrice: [{required: true, message: '电费 - 商业不能为空', trigger: 'blur'}],
        chargerRoleType: [{required: true, message: '充电桩收费类型不能为空', trigger: 'blur'}],
        qrCode: [{required: true, message: '小区物业费收费二维码不能为空', trigger: 'blur'}],
        state: [{required: true, message: '状态  0 - 可用 1 - 不可用不能为空', trigger: 'blur'}],
        wyfYhMonth: [{required: true, message: '一次性缴费 享受优惠的 的月数 不能为空', trigger: 'blur'}],
        wyfYhRate: [{required: true, message: '优惠的折扣  9.5折  全年折扣不能为空', trigger: 'blur'}],
        wyfYhRateHalf: [{required: true, message: '优惠的折扣  9.7折  半年折扣不能为空', trigger: 'blur'}],
        payPlatformId: [{required: true, message: '农商行支付商户id不能为空', trigger: 'blur'}],
        checkMeterYear: [{required: true, message: '抄表年份不能为空', trigger: 'blur'}],
        checkMeterMonth: [{required: true, message: '抄表月份不能为空', trigger: 'blur'}],
        wyfWaterBand: [{required: true, message: '物业费和水费绑定  0 - 不绑定 1 - 绑定选中月份之前的  2 - 所有全部绑定不能为空', trigger: 'blur'}],
})

// 打开弹窗
const openDialog = (id: string) => {
  visible.value = true
  form.id = ''

  // 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});

  // 获取estate信息
  if (id) {
    form.id = id
    getestateData(id)
  }
};

// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
    loading.value = true;
		form.id ? await putObj(form) : await addObj(form);
		useMessage().success(form.id ? '修改成功' : '添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
	} finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getestateData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj(id).then((res: any) => {
    Object.assign(form, res.data)
  }).finally(() => {
    loading.value = false
  })
};

// 暴露变量
defineExpose({
  openDialog
});
</script>
